<template>
  <div>
    <el-card>
      <!-- 搜索区 -->
      <el-form
        ref="refresh_ref"
        :model="query_info"
        :rules="refresh_rules"
        label-width="100px"
      >
        <el-row :gutter="20">
          <el-col :span="7">
            <el-form-item label="用户昵称" prop="nick_name">
              <el-input
                placeholder="请输入用户昵称"
                maxlength="30"
                clearable
                show-word-limit
                v-model="query_info.nick_name"
                @clear="get_list()"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="是否显示" prop="status">
              <el-select
                v-model="query_info.status"
                placeholder="请选择是否显示"
                clearable
                @clear="get_list()"
              >
                <el-option label="否" value="0"></el-option>
                <el-option label="是" value="1"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="星级" prop="level">
              <el-select
                v-model="query_info.level"
                placeholder="请选择星级"
                clearable
                @clear="get_list()"
              >
                <el-option label="非常差" value="1"></el-option>
                <el-option label="差" value="2"></el-option>
                <el-option label="一般" value="3"></el-option>
                <el-option label="好" value="4"></el-option>
                <el-option label="非常好" value="5"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="评论时间" prop="created_at">
              <el-date-picker
                v-model="query_info.created_at"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                clearable
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row :gutter="20" class="s_row">
        <el-col :span="2">
          <el-button type="primary" @click="get_list()">查询</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="success" @click="refresh()">重置</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="info" @click="$router.go(-1)">返回</el-button>
        </el-col>
      </el-row>
      <!-- 表格区 -->
      <el-table :data="list" border>
        <el-table-column
          align="center"
          label="编号"
          prop="id"
          width="80"
          fixed="left"
          sortable
        ></el-table-column>
        <el-table-column
          align="center"
          label="昵称"
          prop="user_to.nick_name"
          width="200"
        ></el-table-column>
        <el-table-column
          align="center"
          label="星级"
          prop="level_name"
          width="200"
        ></el-table-column>
        <el-table-column
          align="center"
          label="是否显示"
          prop="status"
          width="150"
        >
          <template v-slot="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.status ? '是' : '否'"
              placement="top"
              :enterable="false"
            >
              <el-switch
                :disabled="btnStatus.evaluate_status"
                v-model="scope.row.status"
                active-color="#5FB878"
                inactive-color="#d2d2d2"
                @change="set_status(scope.row)"
              ></el-switch>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          label="图片"
          align="center"
          prop="image_url"
          width="200"
        >
          <template v-slot="scope">
            <el-image
              class="list_image"
              :src="scope.row.images[0]"
              :preview-src-list="scope.row.images"
            >
              <div class="image-error">暂无图片</div>
            </el-image>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          label="评论时间"
          prop="created_at"
          width="200"
          sortable
        ></el-table-column>
      </el-table>
      <!-- 页码区 -->
      <el-pagination
        @size-change="handle_size_change"
        @current-change="handle_current_change"
        :total="total"
        :layout="$config.layout"
        :current-page="query_info.page"
        :page-sizes="$config.page_sizes"
        :page-size="query_info.pagesize"
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      btnStatus: this.is_string(
        {
          evaluate_status: "shop/product/evaluate_status"
        },
        this
      ),
      query_info: {
        id: this.$route.query.id,
        nick_name: "", // 用户昵称
        status: "", // 是否显示:0=否,1=是
        level: "", // 星级：1=非常差，2=差，3=一般，4=好，5=非常好
        created_at: [], // 添加时间
        page: this.$config.page, // 当前页码
        pagesize: this.$config.pagesize // 每页显示条数
      },
      list: [], // 列表数据
      total: 0, // 总数据条数
      refresh_rules: { nick_name: [], status: [], level: [], created_at: [] }
    };
  },
  created() {
    this.get_list();
  },
  methods: {
    // 获取列表
    get_list() {
      this.$base.request(
        {
          that: this,
          url: "shop/product/evaluate_list",
          data: this.query_info
        },
        res => {
          if (res.code === 8888) {
            this.list = res.data.list;
            this.total = res.data.total;
          }
        }
      );
    },
    // 刷新
    refresh() {
      this.$refs.refresh_ref.resetFields();
      this.get_list();
    },
    // 当前每页多少条选择
    handle_size_change(pagesize) {
      this.query_info.pagesize = pagesize;
      this.get_list();
    },
    // 当前页码
    handle_current_change(page) {
      this.query_info.page = page;
      this.get_list();
    },
    // 状态调整
    set_status(info) {
      this.$base.request(
        {
          that: this,
          method: "PUT",
          url: "shop/product/evaluate_status",
          data: { id: info.id, status: info.status ? 1 : 0 }
        },
        res => {
          if (res.code === 8888) {
            this.$base.message({ that: this, message: res.msg });
          } else {
            info.status = !info.status;
          }
        }
      );
    }
  }
};
</script>
